<script setup lang="ts">
import type { AccountLog, AccountLogQuery } from '@/apis/system/accountLogApi'
import { FullScreen, Refresh } from '@element-plus/icons-vue'
import { ref } from 'vue'
import VueJsonPretty from 'vue-json-pretty'
import { accountLogApi } from '@/apis/system/accountLogApi'
import { useTable } from '@/components/DataPage/useTable'
import BaseCard from '@/layouts/BaseCard.vue'
import { useDictStore } from '@/stores/dictStore'
import 'vue-json-pretty/lib/styles.css'

const {
  submitQuery,
  QueryForm,
  Table,
  TableFieldFilterButton,
} = useTable<AccountLogQuery, AccountLog>({
  autoQuery: true,
  queryPage: accountLogApi.queryPage,
  queryFields: [
    { title: '应用名称', name: 'appType', dict: 'ENUM_APP_TYPE' },
    { title: '模块名称', name: 'moduleName', dict: { dictCode: 'MODULE', dictFilter: dict => (dict.customData?.type === 'BIZ') } },
    { title: '资源名称', name: 'resourceName' },
    { title: '账号', name: 'accountId' },
    { title: '请求结果', name: 'success' },
    { title: '请求IP', name: 'clientIp' },
    { title: '开始时间', name: 'startTime', type: 'datetime' },
    { title: '结束时间', name: 'endTime', type: 'datetime' },
  ],
  tableFields: [
    { title: 'ID', name: 'id', width: 80, columnType: 'KEY', sort: false },
    { title: '应用名称', name: 'appType', width: 120, align: 'center', dict: 'ENUM_APP_TYPE' },
    { title: '模块名称', name: 'moduleName', width: 120, dict: 'MODULE', align: 'center' },
    { title: '资源名称', name: 'resourceName', width: 180, click: onDetail },
    { title: '账号', name: 'accountName', width: 100, show: true, align: 'center' },
    { title: '请求结果', name: 'success', width: 80, align: 'center' },
    { title: '请求IP', name: 'clientIp', width: 80, align: 'center' },
    { title: '耗时', name: 'cost', width: 80, align: 'right' },
    { title: '开始时间', name: 'startTime', width: 120, align: 'center' },
    { title: '结束时间', name: 'endTime', width: 120, align: 'center' },
  ],
})

const detailVisible = ref(false)
const detailData = ref<AccountLog>()
const dictStore = useDictStore()
async function onDetail(row: AccountLog) {
  detailData.value = await accountLogApi.findDetail(row.id!)
  detailVisible.value = true
}
</script>

<template>
  <BaseCard title="查询条件">
    <QueryForm>
      <template #success="{ data }">
        <el-select v-model="data.success">
          <el-option value="true" label="成功" />
          <el-option value="false" label="失败" />
        </el-select>
      </template>
      <template #accountId="{ data }">
        <OperatorSelect v-model="data.accountId" />
      </template>
    </QueryForm>
  </BaseCard>
  <BaseCard title="数据列表" class="mt-2">
    <template #buttons>
      <el-button :icon="Refresh" circle @click="submitQuery()" />
      <el-button :icon="FullScreen" circle />
      <TableFieldFilterButton />
    </template>
    <!-- 数据表格 -->
    <Table>
      <template #success="{ row }">
        <el-tag v-if="row.success" type="success">
          成功
        </el-tag>
        <el-tag v-else type="danger">
          失败
        </el-tag>
      </template>
      <template #cost="{ row }">
        {{ row.cost }}ms
      </template>
    </Table>
  </BaseCard>

  <el-drawer
    v-if="detailData"
    v-model="detailVisible"
    title="日志详情"
    size="800"
    destroy-on-close
    append-to-body
    center
    resizable
  >
    <el-descriptions
      :column="2"
      label-width="100"
      border
    >
      <el-descriptions-item label="操作人" :span="2">
        {{ detailData.accountName }}[{{ detailData.accountId }}]
      </el-descriptions-item>

      <el-descriptions-item label="应用名称">
        {{ detailData.appName }}[{{ detailData.appType }}]
      </el-descriptions-item>

      <el-descriptions-item label="模块名称">
        {{ dictStore.getFlatDict('MODULE', detailData.moduleName)?.dictName }} [{{ detailData.moduleName }}]
      </el-descriptions-item>

      <el-descriptions-item label="资源名称">
        {{ detailData.resourceName }}
      </el-descriptions-item>

      <el-descriptions-item label="资源">
        {{ detailData.resourceMethod }}:{{ detailData.resourcePath }}
      </el-descriptions-item>

      <el-descriptions-item label="开始时间">
        {{ detailData.startTime }}
      </el-descriptions-item>

      <el-descriptions-item label="结果时间">
        {{ detailData.endTime }}
      </el-descriptions-item>

      <el-descriptions-item label="请求结果">
        <el-tag v-if=" detailData.success" type="success">
          成功
        </el-tag>
        <el-tag v-else type="danger">
          失败
        </el-tag>
      </el-descriptions-item>

      <el-descriptions-item label="耗时">
        {{ detailData.cost }}ms
      </el-descriptions-item>

      <el-descriptions-item label="请求IP" :span="2">
        {{ detailData.clientIp }}
      </el-descriptions-item>

      <el-descriptions-item label="请求UA" :span="2">
        {{ detailData.clientUserAgent }}
      </el-descriptions-item>

      <el-descriptions-item label="请求参数" :span="2">
        <VueJsonPretty
          v-if="detailData.params"
          :data="JSON.parse(detailData.params)"
          show-icon
          show-key-value-space
          :deep="2"
        />
      </el-descriptions-item>

      <el-descriptions-item label="响应结果" :span="2">
        <VueJsonPretty
          v-if="detailData.result"
          :data="JSON.parse(detailData.result)"
          show-icon
          show-key-value-space
          :deep="2"
        />
      </el-descriptions-item>
    </el-descriptions>
  </el-drawer>
</template>
